<template>
  <div class="box">
    <div
      class="title"
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        padding: 10px;
        font-size: 40px;
        margin-top: 0;
        max-width: 1200px;
      "
    >
      AI图文创款——鞋履创意设计 评价结果
    </div>
    <div class="box1">
      <div class="sortData">
        <h1 style="margin-left: 18px">总分评价</h1>
        <el-row v-for="item in sortDataList" :key="item">
          <el-col :span="7" style="text-align: center; margin-top: 8px">{{
            item.name
          }}</el-col>
          <el-col :span="6">
            <el-tag size="large" round style="font-size: 15px">{{
              item.value
            }}</el-tag>
          </el-col>
          <el-divider border-style="dotted" style="margin: 8px 0 0 0" />
        </el-row>
      </div>
      <div class="chart0" id="chart0"></div>
      <div class="count">
        <h1>评价提交人数</h1>
        <div>35/35</div>
      </div>
    </div>
    <div class="box2">
      <div class="chart1">
        <div class="title">AI工具应用</div>
        <div style="height: 500px" id="chart1"></div>
      </div>
      <div class="chart2">
        <div class="title">任务成效</div>
        <div style="height: 500px" id="chart2"></div>
      </div>
      <div class="chart3">
        <div class="title">特色创新</div>
        <div style="height: 500px" id="chart3"></div>
      </div>
      <div class="chart4">
        <div class="title">职业素养</div>
        <div style="height: 500px" id="chart4"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const sortDataList = ref([
  { name: "知行组", value: 83.3 },
  { name: "好学组", value: 80.5 },
  { name: "善学组", value: 93.2 },
  { name: "崇学组", value: 86.5 },
  { name: "思行组", value: 88.1 },
  { name: "力行组", value: 88.7 },
]);

onMounted(() => {
  for (let i = 0; i < 4; i++) {
    const domMap = document.getElementById("chart" + (i + 1));
    // 清除Echarts默认添加的属性
    domMap.removeAttribute("_echarts_instance_");
  }
  getCharts0();
  getCharts1();
  getCharts2();
  getCharts3();
  getCharts4();
});

const getCharts0 = () => {
  const charts0 = echarts.init(document.getElementById("chart0"));
  const option = {
    title: {
      text: "分项统计",
      textStyle: {
        color: "white",
      },
      top: 10,
      left: 10,
    },
    tooltip: {},
    legend: {
      data: [
        { name: "AI工具应用", icon: "circle" },
        { name: "任务成效", icon: "circle" },
        { name: "特色创新", icon: "circle" },
        { name: "职业素养", icon: "circle" },
      ],
      bottom: 7,
      textStyle: {
        fontWeight: "bold",
        color: "white",
      },
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: "知行组", max: 25 },
        { name: "好学组", max: 25 },
        { name: "善学组", max: 25 },
        { name: "崇学组", max: 25 },
        { name: "思行组", max: 25 },
        { name: "力行组", max: 25 },
      ],
    },
    series: [
      {
        type: "radar",
        data: [
          {
            value: [18.7, 16.3, 24.7, 18.9, 20.3, 19.8],
            name: "AI工具应用",
            lineStyle: {
              color: "#03ede6",
            },
            itemStyle: {
              color: "#03ede6",
            },
          },
          {
            value: [22.1, 21.9, 23.3, 23.5, 24.1, 23.4],
            name: "任务成效",
            lineStyle: {
              color: "#f00",
            },
            itemStyle: {
              color: "#f00",
            },
          },
          {
            value: [20.3, 20.4, 22.1, 21.2, 20.0, 21.0],
            name: "特色创新",
            lineStyle: {
              color: "#0f0",
            },
            itemStyle: {
              color: "#0f0",
            },
          },
          {
            value: [22.2, 21.9, 23.1, 22.9, 23.7, 24.5],
            name: "职业素养",
            lineStyle: {
              color: "#fff",
            },
            itemStyle: {
              color: "#fff",
            },
          },
        ],
      },
    ],
  };
  charts0.setOption(option);
};

const getCharts1 = () => {
  let chart = null;
  if (chart) console.log(456456465, chart);
  chart = echarts.init(document.getElementById("chart1"));

  const option = {
    title: {
      text: "AI工具应用评定",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 26,
        color: "white",
      },
    },
    tooltip: {},
    xAxis: [
      {
        data: ["知行组", "好学组", "善学组", "崇学组", "思行组", "力行组"],
        axisLabel: {
          textStyle: {
            fontSize: "15",
            color: "white",
          },
        },
      },
    ],
    yAxis: {
      max: 30,
      min: 15,
      axisLabel: {
        textStyle: {
          fontSize: "15",
          color: "white",
        },
      },
    },
    series: [
      {
        name: "分数",
        type: "bar",
        data: [23.7, 21.3, 29.7, 23.9, 25.3, 24.8],
        colorBy: "data",
      },
    ],
  };

  chart.setOption(option);
};

const getCharts2 = () => {
  const chart = echarts.init(document.getElementById("chart2"));
  const option = {
    title: {
      text: "任务成效评定",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 26,
        color: "white",
      },
    },
    tooltip: {},

    xAxis: {
      max: 20,
      min: 10,
      axisLabel: {
        textStyle: {
          fontSize: "15",
          color: "white",
        },
      },
    },
    yAxis: {
      data: ["知行组", "好学组", "善学组", "崇学组", "思行组", "力行组"],

      axisLabel: {
        textStyle: {
          fontSize: "15",
          color: "white",
        },
      },
    },
    series: [
      {
        name: "分数",
        type: "bar",
        data: [17.1, 16.9, 18.3, 18.5, 19.1, 18.4],
        colorBy: "data",
      },
    ],
  };

  chart.setOption(option);
};

const getCharts3 = () => {
  const chart = echarts.init(document.getElementById("chart3"));
  var option = {
    title: {
      text: "特色创新评定",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 26,
        color: "white",
      },
    },
    legend: {
      data: ["知行组", "好学组", "善学组", "崇学组", "思行组", "力行组"],
      bottom: 20,
      textStyle: {
        fontWeight: "bold",
        color: "white",
      },
    },
    series: [
      {
        type: "pie",
        data: [
          {
            value: 15.3,
            name: "知行组",
          },
          { value: 15.4, name: "好学组" },
          { value: 17.1, name: "善学组" },
          { value: 16.2, name: "崇学组" },
          { value: 15.0, name: "思行组" },
          { value: 16.0, name: "力行组" },
        ],
        radius: "30%",
        label: {
          color: "rgb(255, 255, 255)",
          fontSize: 18,
          fontWeight: "bold",
          formatter: "{b} : {c} ({d}%)",
        },
      },
    ],
  };

  chart.setOption(option);
};

const getCharts4 = () => {
  const chart = echarts.init(document.getElementById("chart4"));
  const option = {
    title: {
      text: "职业素养评定",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 26,
        color: "white",
      },
    },
    tooltip: {},
    xAxis: [
      {
        data: ["知行组", "好学组", "善学组", "崇学组", "思行组", "力行组"],
        axisLabel: {
          textStyle: {
            fontSize: "15",
            color: "white",
          },
        },
      },
    ],
    yAxis: {
      max: 30,
      min: 15,
      axisLabel: {
        textStyle: {
          fontSize: "15",
          color: "white",
        },
      },
    },
    series: [
      {
        name: "分数",
        type: "line",
        data: [27.2, 26.9, 28.1, 27.9, 28.7, 29.5],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(84, 112, 198,0.8)",
            },
            {
              offset: 1,
              color: "rgba(129, 66, 158,0.3)",
            },
          ]),
        },
      },
    ],
  };

  chart.setOption(option);
};
</script>

<style scoped lang="scss">
// 科技感主背景
.box {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a2a3a 0%, #243f52 100%);
  color: rgb(255, 255, 255);
  padding: 20px;
  box-sizing: border-box;

  // 第一行卡片布局
  .box1 {
    height: 430px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;

    // 科技感卡片样式
    & > div {
      width: 32%;
      margin: 0 5px;
      background: linear-gradient(
        145deg,
        rgba(50, 67, 116, 0.9) 0%,
        rgba(40, 55, 100, 0.9) 100%
      );
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(74, 158, 255, 0.1);
      border-radius: 12px;
      border: 1px solid rgba(74, 158, 255, 0.2);
      transition: all 0.3s ease;
      overflow: hidden;
      position: relative;

      // 卡片悬浮效果
      &:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4),
          0 0 30px rgba(74, 158, 255, 0.2);
        transform: translateY(-2px);
      }

      // 卡片顶部科技感线条
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent, #4a9eff, transparent);
      }
    }

    .sortData {
      padding: 20px;
      box-sizing: border-box;

      .el-row {
        display: flex;
        justify-content: space-between;
        // margin: 15px 0;
        padding: 5px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
    }

    // 提交人数统计样式
    .count {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      h1 {
        position: absolute;
        top: 5%;
        font-size: 35px;
        font-weight: 300;
        text-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
      }

      div {
        font-size: 60px;
        font-weight: bold;
        padding: 10px;
        color: #4a9eff;
        text-shadow: 0 0 20px rgba(74, 158, 255, 0.5);
        letter-spacing: 2px;
      }
    }
  }

  // 第二行卡片布局
  .box2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

    // 统一卡片样式
    & > div {
      margin: 10px 0;
      background: linear-gradient(
        145deg,
        rgba(50, 67, 116, 0.9) 0%,
        rgba(40, 55, 100, 0.9) 100%
      );
      width: calc(50% - 10px);
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(74, 158, 255, 0.1);
      border-radius: 12px;
      border: 1px solid rgba(74, 158, 255, 0.2);
      transition: all 0.3s ease;
      overflow: hidden;
      position: relative;

      // 卡片悬浮效果
      &:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4),
          0 0 30px rgba(74, 158, 255, 0.2);
        transform: translateY(-2px);
      }

      // 卡片顶部科技感线条
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent, #4a9eff, transparent);
      }
    }
  }
}

// 增强科技感标题样式
.title {
  width: 100%;
  max-width: 580px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background: linear-gradient(
    135deg,
    rgb(20, 70, 110) 0%,
    rgb(30, 80, 120) 50%,
    rgb(40, 90, 130) 100%
  );
  border-radius: 12px;
  margin: 15px auto;
  padding: 20px 35px;
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 10px rgba(74, 158, 255, 0.5),
    0 0 20px rgba(74, 158, 255, 0.3), 0 0 30px rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.4);
  letter-spacing: 1.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 25px rgba(74, 158, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;

  // 科技感装饰线条
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4a9eff, transparent);
    animation: glowPulse 3s infinite alternate;
  }

  // 科技感点状图案背景
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(
      circle,
      rgba(74, 158, 255, 0.2) 1px,
      transparent 1px
    );
    background-size: 20px 20px;
    opacity: 0.4;
    pointer-events: none;
  }

  // 悬停效果增强
  &:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(74, 158, 255, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
  }

  // 确保文字在最上层
  z-index: 1;
}

// 发光脉冲动画
@keyframes glowPulse {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
</style>